<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonCss.js"></script>
		<title>保险超级课堂</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14 h40">
				保险超级课堂
				<el-button class="f-r" type="primary" icon="el-icon-plus" @click="addCont">添加资讯</el-button>
			</div>
			<div class="pd10">		
				<el-form :inline="true" :model="formInline" class="demo-form-inline">					
					<el-form-item>
						<el-input v-model="formInline.name" type="text" placeholder="名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-select v-model="formInline.category" placeholder="类别">
							<el-option :label="item.label" :value="item.value" v-for="item in categoryArr" :key="item.label"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search">查询</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="tableData" stripe border style="width: 100%">
					<el-table-column prop="name" label="标题"></el-table-column>
					<el-table-column label="展示图片">
						<template slot-scope="scope">
							<img :src="scope.row.pic" min-width="92" height="92" />
						</template>
					</el-table-column>
					<el-table-column prop="category" label="类别"></el-table-column>
					<el-table-column prop="time" label="创建时间"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button @click="handleEdit(scope.row)" type="text" size="medium">编辑</el-button>
							<el-button @click="handleDelete(scope.row)" type="text" size="medium" class="color-F56C6C">删除</el-button>
						</template>
					</el-table-column>
				</el-table>				
				<!-- 分页 -->
				<div class="bottomstate">
					<el-pagination class="f-r mt5" background @current-change="handleCurrentChange" :current-page="page" :page-size="limit" layout="total,prev, pager, next,jumper"
					 :total="total" ></el-pagination>
				</div>
			</div>
		</div>
	</body>
	<script src="/jeefast/elementui-lib/lib/vue.js"></script>
	<script src="/jeefast/elementui-lib/lib/index.js"></script>
	<script src="/jeefast/js/jquery-1.9.1.min.js"></script>
	<script src="/jeefast/js/axios.js"></script>
	<script src="/jeefast/js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					formInline:{
						name:"",
						category:""
					},
					categoryArr:[{
						value: '1',
						label: '小白入门'
					},{
						value: '2',
						label: '防坑指南'
					},{
						value: '3',
						label: '重疾病专题'
					},{
						value: '3',
						label: '寿险专题'
					},{
						value: '3',
						label: '医疗险专题'
					},{
						value: '3',
						label: '意外险专题'
					}],
					tableData: [{
						id:1,
						name:"定寿新概念：时间越长",
						pic:"https://goss.veer.com/creative/vcg/veer/800water/veer-154192102.jpg",
						category:"重疾病专题",
						time:"2020年2月13日 17:51:26"
					},{
						id:2,
						name:"定寿新概念：时间越长",
						pic:"https://goss.veer.com/creative/vcg/veer/800water/veer-154192102.jpg",
						category:"小白入门",
						time:"2020年2月13日 17:51:26"
					}],	
				}
			},
			methods: {
				search:function(){
					console.log(this.formInline)
				},
				// 添加
				addCont:function(){
					window.location.href = 'insuranceClassCont.html';//此处拼接内容
				},
				// 删除
				handleDelete:function(row){
					let that = this
					that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						that.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						that.$message({
							type: 'info',
							message: '已取消删除'
						});          
					});
				},
				handleEdit:function(row){
					console.log(row)
					window.location.href = 'insuranceClassCont.html?id='+row.id;//此处拼接内容
				},
			},
			created() {
				
			},
		});
	</script>
</html>
